<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
    xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
	<title>Welcome to OTV_JSF_Spring_Hibernate_Project</title>
</h:head>
<h:body>
    <ui:composition template="/pages/common/commonLayout.xhtml">

    <ui:define name="content">
        <p:toolbar id="tb">
            <p:toolbarGroup align="right">

                <p:commandButton value="New" onclick="composeDlg.show()" type="button" icon="ui-icon-document"/>

                <p:commandButton type="button" value="Open" icon="ui-icon-folder-open"/>

                <p:separator />

                <p:commandButton type="button" title="Save" icon="ui-icon-disk"/>
                <p:commandButton type="button" title="Delete" icon="ui-icon-trash"/>
                <p:commandButton type="button" title="Print" icon="ui-icon-print"/>
            </p:toolbarGroup>
        </p:toolbar>

        <h:form id="form">

            <p:dataTable widgetVar="carTable"   var="car" value="#{userMB.lazyModel}" paginator="true" rows="10"   resizableColumns="true"

                         emptyMessage="No Customer found with given criteria" selectionMode="single" sortMode="singe" selection="#{userMB.selectedCustomer}" id="dataTable" lazy="true">

                <p:ajax event="rowSelect" listener="#{userMB.onRowSelect}" update=":form:display" oncomplete="customerDialog.show()" />

                <f:facet name="header" >
                    <p:outputPanel>
                        <h:outputText value="Search all fields:" />
                        <p:inputText id="globalFilter" onkeyup="carTable.filter()" style="width:250px" />
                        <p:spacer width="100" height="10" />
                        <p:commandButton value="New" onclick="composeDlg.show()" type="button" icon="ui-icon-document"/>
                    </p:outputPanel>
                </f:facet>
                <p:column headerText="Name"  sortBy="#{car.firstName}"   filterBy="#{car.firstName}">
                    <h:outputText value="#{car.name}" />
                </p:column>

                <p:column headerText="City"  sortBy="#{car.city}"   filterBy="#{car.city}">
                    <h:outputText value="#{car.city}" />
                </p:column>

                <p:column headerText="Contact"  sortBy="#{car.primaryCell}"   filterBy="#{car.primaryCell}">
                    <h:outputText value="#{car.primaryCell}" />
                </p:column>

                <p:column headerText="Company"  sortBy="#{car.companyName}"   filterBy="#{car.companyName}">
                    <h:outputText value="#{car.companyName}" />
                </p:column>
            </p:dataTable>

            <p:blockUI block="dataTable" trigger="dataTable">
                LOADING<br />
                <p:graphicImage value="/images/ajax-loader.gif"/>
            </p:blockUI>

            <p:dialog header="Customer Detail" widgetVar="customerDialog" resizable="false"
                      showEffect="explode" hideEffect="explode">

                <h:panelGrid id="display" columns="2" cellpadding="4">

                    <f:facet name="header">
                        <p:graphicImage value="/images/cars/#{userMB.selectedCustomer.firstName}.jpg"/>
                    </f:facet>

                    <h:outputText value="Name:" />
                    <h:outputText value="#{userMB.selectedCustomer.name}" style="font-weight:bold"/>


                    <h:outputText value="Company:" />
                    <h:outputText value="#{userMB.selectedCustomer.companyName}" style="font-weight:bold"/>

                    <h:outputText value="City:" />
                    <h:outputText value="#{userMB.selectedCustomer.city}" style="font-weight:bold"/>

                    <h:outputText value="Address:" />
                    <h:outputText value="#{userMB.selectedCustomer.address}" style="font-weight:bold"/>


                    <h:outputText value="Cell#:" />
                    <h:outputText value="#{userMB.selectedCustomer.primaryCell}" style="font-weight:bold"/>

                    <h:outputText value="Email:" />
                    <h:outputText value="#{userMB.selectedCustomer.email}" style="font-weight:bold"/>
                </h:panelGrid>
            </p:dialog>

        </h:form>
        <h:form id="newForm">
        <p:dialog widgetVar="composeDlg" modal="true" header="New Customer" width="530" showEffect="fade" hideEffect="fade">

            <h:panelGrid columns="2" >
               <h:outputLabel for="surname" value="Title : " />

                        <p:selectOneMenu value="#{userMB.title.code}" id="surname">

                            <f:selectItems value="#{userMB.titles}" var="c"
                                           itemLabel="#{c.label}" itemValue="#{c.code}" />
                        </p:selectOneMenu>
                    <h:outputLabel for="firstName" value="First Name : " />
                    <p:inputText id="firstName" value="#{userMB.firstName}" required="true" label="firstName">
                        <f:validateLength minimum="5" />

                    </p:inputText>


                   <h:outputLabel for="lastName" value="Last Name : " />
                 <p:inputText id="lastName" value="#{userMB.lastName}" required="true"  label="lastName" >
                        <f:validateLength minimum="5" />

                    </p:inputText>


                  <h:outputLabel for="nickName" value="Nick Name : " />
                  <p:inputText id="nickName" value="#{userMB.nickName}"></p:inputText>

                  <h:outputLabel for="company" value="Company : " />
                  <p:inputText id="company" value="#{userMB.companyName}"></p:inputText>

                     <h:outputLabel for="email" value="Email : " />
                  <p:inputText id="email" value="#{userMB.email}" >   </p:inputText>

                 <h:outputLabel for="city" value="City : " />
                  <p:inputText id="city" value="#{userMB.city}" required="true" label="city"></p:inputText>

                   <h:outputLabel for="zipCode" value="ZipCode : " />
                   <p:inputText id="zipCode" value="#{userMB.zipCode}" ></p:inputText>

                 <h:outputLabel for="primaryContact" value="Primary Cell : " />
                       <p:inputText id="primaryContact" value="#{userMB.address}">
                        </p:inputText>

                    <h:outputLabel for="secondaryContact" value="Secondary Cell : " />
                       <p:inputText id="secondaryContact" value="#{userMB.address}">
                        </p:inputText>
                    <h:outputLabel for="address" value="Address : " />
                   <p:inputTextarea rows="5" cols="30" maxlength="100" id="address" value="#{userMB.address}">
                    </p:inputTextarea>


                <f:facet name="footer">
                    <p:commandButton id="loginButton" value="Save" update=":msg ,:form:dataTable"  icon="ui-icon-disk"
                                     actionListener="#{userMB.addUser}"
                                     oncomplete="handleLoginRequest(xhr, status, args)"/>
                    <p:commandButton value="Cancel" onclick="composeDlg.hide()" type="button" icon="ui-icon-close"/>
                </f:facet>
        </h:panelGrid>

        </p:dialog>
        </h:form>

        <p:growl id="msg" />

        <script type="text/javascript">
            function handleLoginRequest(xhr, status, args) {
            if(args.validationFailed || !args.loggedIn) {
               composeDlg.jq.effect("shake", { times:5 }, 100);
            }
            else {
            composeDlg.hide();

            }
            }
        </script>
    </ui:define>


    </ui:composition>


</h:body>

</html>
